From e4ec4f58812512314e270839baf90065541a348e Mon Sep 17 00:00:00 2001 From: Factiven Date: Tue, 25 Apr 2023 16:17:42 +0700 Subject: woosh woosh loading speed goes woosh --- pages/anime/[...id].js | 190 ++++++++++++++++++++++++++++++------------------- 1 file changed, 116 insertions(+), 74 deletions(-) (limited to 'pages/anime/[...id].js') diff --git a/pages/anime/[...id].js b/pages/anime/[...id].js index 65e9568..cf70c62 100644 --- a/pages/anime/[...id].js +++ b/pages/anime/[...id].js @@ -1,7 +1,12 @@ import Skeleton, { SkeletonTheme } from "react-loading-skeleton"; import "react-loading-skeleton/dist/skeleton.css"; -import { HeartIcon } from "@heroicons/react/20/solid"; +import { ClockIcon, HeartIcon } from "@heroicons/react/20/solid"; +import { + TvIcon, + ArrowTrendingUpIcon, + RectangleStackIcon, +} from "@heroicons/react/24/outline"; import Head from "next/head"; import Image from "next/image"; @@ -153,7 +158,7 @@ export default function Info() { ); // console.log(rec); - console.log(progress); + // console.log(info); useEffect(() => { const defaultState = { @@ -188,10 +193,6 @@ export default function Info() { if (id) { setLoading(false); try { - // const res = await fetch( - // `https://api.moopa.my.id/meta/anilist/info/${id?.[0]}` - // ); - const [res, info] = await Promise.all([ fetch(`https://api.moopa.my.id/meta/anilist/info/${id?.[0]}`), fetch("https://graphql.anilist.co/", { @@ -211,19 +212,27 @@ export default function Info() { const infos = await info.json(); setInfo(infos.data.Media); + const textColor = setTxtColor(infos.data.Media.coverImage?.color); + if (!data || data.episodes.length === 0) { const res = await fetch( `https://api.consumet.org/meta/anilist/info/${id[0]}?provider=9anime` ); const datas = await res.json(); - setColor({ backgroundColor: `${data?.color || "white"}` }); + setColor({ + backgroundColor: `${data?.color || "#ffff"}`, + color: textColor, + }); setStall(true); setEpisode(datas.episodes); } else { setEpisode(data.episodes); } - setColor({ backgroundColor: `${data?.color || "white"}` }); + setColor({ + backgroundColor: `${data?.color || "#ffff"}`, + color: textColor, + }); if (session?.user?.name) { const response = await fetch("https://graphql.anilist.co/", { @@ -275,40 +284,19 @@ export default function Info() { ); } - function getBrightness(color) { - const rgb = color.match(/\d+/g); - return (299 * rgb[0] + 587 * rgb[1] + 114 * rgb[2]) / 1000; - } - - // set the text color based on the background color - function setTextColor(element) { - const backgroundColor = getComputedStyle(element).backgroundColor; - const brightness = getBrightness(backgroundColor); - if (brightness < 128) { - element.style.color = "#fff"; // white - } else { - element.style.color = "#000"; // black - } - } - - const elements = document.querySelectorAll(".dynamic-text"); - elements.forEach((element) => { - setTextColor(element); - }); - setData(data); setLoading(true); } catch (error) { + console.log(error); setTimeout(() => { window.location.reload(); }, 1000); } } - // setLoading(true); } fetchData(); }, [id, session?.user?.name]); - // console.log(episode); + return ( <> @@ -318,14 +306,18 @@ export default function Info() { : "Retrieving Data..."} - +
{info ? ( banner anime )}
-
+
{/* Mobile */} -
-
+
+

{/* Yuru Campā–³ SEASON 2 */} {info?.title?.romaji || info?.title?.english}

-

+
{info?.genres ?.slice( 0, info?.genres?.length > 3 ? info?.genres?.length : 3 ) .map((item, index) => ( - - - {item} - + + {item} {/* {index !== info?.genres?.length - 1 && ( )} */} @@ -366,24 +360,38 @@ export default function Info() { ))}
{info && ( -
-
- {statuses ? statuses : "Add to List"} -
-
- +
+
+
+ {statuses ? statuses : "Add to List"} +
+
+ +
)}
-
-
- {/*
- completed -
-
- -
*/} +
+
+ {info && info.status !== "NOT_YET_RELEASED" ? ( + <> +
+ +

{info?.type}

+
+
+ +

{info?.averageScore}%

+
+
+ +

{info?.episodes} Episodes

+
+ + ) : ( +
{info && "Not Yet Released"}
+ )}
@@ -422,44 +430,44 @@ export default function Info() { {info ? (
{info?.episodes} Episodes
{info?.startDate?.year}
{info?.averageScore}%
{info?.type}
{info?.status}
Sub | EN
{info && info.nextAiringEpisode && (
Ep {info.nextAiringEpisode.episode}: {time} @@ -476,7 +484,7 @@ export default function Info() { className="overflow-y-scroll scrollbar-thin pr-2 scrollbar-thumb-secondary scrollbar-thumb-rounded-lg h-[140px]" /> ) : ( - + )} {/*

{data.description}

*/}
@@ -499,7 +507,7 @@ export default function Info() { )}
{info?.relations?.edges ? info?.relations?.edges @@ -574,9 +582,25 @@ export default function Info() { Episodes )} + {info?.nextAiringEpisode && ( +
+
+

Next Ep :

+
+ {time} +
+
+
+ +
+
+ )} {statuses && ( <> -
+
{statuses} status @@ -589,36 +613,38 @@ export default function Info() { data && (
{episode ? ( - episode.map((episode, index) => { + episode.map((epi, index) => { return (
-

Episode {episode.number}

- {episode.title && ( +

Episode {epi.number}

+ {epi.title && (

- "{episode.title}" + "{epi.title}"

)} -
+ {index !== episode?.length - 1 && ( + + )}
); }) @@ -673,3 +699,19 @@ function convertSecondsToTime(sec) { return time.trim(); } + +function getBrightness(hexColor) { + if (!hexColor) { + return 200; + } + const rgb = hexColor + .match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i) + .slice(1) + .map((x) => parseInt(x, 16)); + return (299 * rgb[0] + 587 * rgb[1] + 114 * rgb[2]) / 1000; +} + +function setTxtColor(hexColor) { + const brightness = getBrightness(hexColor); + return brightness < 150 ? "#fff" : "#000"; +} -- cgit v1.2.3